<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>多种样式会员列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 通用样式 */
    .navbar {
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      z-index: 1050;
    }
    
    .list-section {
      margin-bottom: 30px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
    
    .list-section:first-child {
      border-top: none;
    }
    
    .no-image {
      background-color: #e3f2fd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1976d2;
    }
    
    .multi-images {
      position: relative;
      height: 100%;
    }
    
    .multi-images img:nth-child(2) {
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 50%;
      border: 2px solid white;
    }
    
    .member-tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
    }
    
    /* 网格卡片样式 */
    .grid-card {
      transition: transform 0.2s, box-shadow 0.2s;
      height: 100%;
    }
    
    .grid-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    
    /* 列表样式 */
    .list-item {
      transition: background-color 0.2s;
    }
    
    .list-item:hover {
      background-color: #f0f7ff;
    }
    
    /* 图文卡片样式 */
    .media-card {
      transition: all 0.2s;
    }
    
    .media-card:hover {
      transform: translateX(5px);
    }
    
    /* 紧凑列表样式 */
    .compact-item {
      border-bottom: 1px solid #eee;
      padding: 10px 0;
    }
    
    .compact-item:last-child {
      border-bottom: none;
    }
    
    /* 标签式列表 */
    .tag-item {
      transition: all 0.2s;
    }
    
    .tag-item:hover {
      background-color: #e0f2fe;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      z-index: 1040;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-light bg-white fixed-top">
    <div class="container-fluid px-4">
      <button class="btn btn-link p-0 me-2" type="button">
        <i class="fa fa-arrow-left text-dark"></i>
      </button>
      <h5 class="navbar-brand mb-0 fw-bold flex-grow-1 text-center">多种样式会员列表</h5>
      <button class="btn btn-link p-0" type="button">
        <i class="fa fa-ellipsis-v text-dark"></i>
      </button>
    </div>
  </nav>

  <!-- 主内容区 -->
  <div class="container-fluid px-4" style="margin-top: 56px; padding-top: 15px;">
    <!-- 1. 网格卡片列表 -->
    <div class="list-section">
      <h6 class="fw-bold mb-3">网格卡片列表</h6>
      <div class="row gap-3">
        <div class="col-6">
          <div class="card grid-card rounded-3 overflow-hidden">
            <div style="height: 120px;">
              <img src="https://picsum.photos/300/300?random=1" class="w-100 h-100 object-cover" alt="会员照片">
            </div>
            <div class="p-3">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold mb-0">李明</h6>
                <span class="member-tag bg-primary text-white">摄影</span>
              </div>
              <p class="text-xs text-secondary mt-1">2公里 · 在线</p>
              <button class="btn btn-sm btn-primary rounded-pill w-100 mt-2">关注</button>
            </div>
          </div>
        </div>
        
        <div class="col-6">
          <div class="card grid-card rounded-3 overflow-hidden">
            <div class="no-image" style="height: 120px; font-size: 28px;">
              <i class="fa fa-user"></i>
            </div>
            <div class="p-3">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold mb-0">王芳</h6>
                <span class="member-tag bg-success text-white">音乐</span>
              </div>
              <p class="text-xs text-secondary mt-1">5公里 · 1小时前</p>
              <button class="btn btn-sm btn-primary rounded-pill w-100 mt-2">关注</button>
            </div>
          </div>
        </div>
        
        <div class="col-6">
          <div class="card grid-card rounded-3 overflow-hidden">
            <div style="height: 120px;" class="multi-images">
              <img src="https://picsum.photos/300/300?random=3" class="w-100 h-100 object-cover" alt="会员照片1">
              <img src="https://picsum.photos/300/300?random=4" class="object-cover" alt="会员照片2">
            </div>
            <div class="p-3">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold mb-0">张伟</h6>
                <span class="member-tag bg-info text-white">编程</span>
              </div>
              <p class="text-xs text-secondary mt-1">1公里 · 30分钟前</p>
              <button class="btn btn-sm btn-primary rounded-pill w-100 mt-2">关注</button>
            </div>
          </div>
        </div>
        
        <div class="col-6">
          <div class="card grid-card rounded-3 overflow-hidden">
            <div style="height: 120px;">
              <img src="https://picsum.photos/300/300?random=5" class="w-100 h-100 object-cover" alt="会员照片">
            </div>
            <div class="p-3">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold mb-0">赵丽</h6>
                <span class="member-tag bg-warning text-white">美食</span>
              </div>
              <p class="text-xs text-secondary mt-1">8公里 · 离线</p>
              <button class="btn btn-sm btn-primary rounded-pill w-100 mt-2">关注</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 2. 标准列表视图 -->
    <div class="list-section">
      <h6 class="fw-bold mb-3">标准列表视图</h6>
      <div class="space-y-2">
        <div class="bg-white rounded-3 p-3 list-item">
          <div class="d-flex">
            <div style="width: 70px; height: 70;" class="me-3 flex-shrink-0">
              <img src="https://picsum.photos/300/300?random=1" class="w-100 h-100 rounded-2 object-cover" alt="会员照片">
            </div>
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">李明</h6>
                <span class="member-tag bg-primary text-white">摄影</span>
              </div>
              <p class="text-xs text-secondary">2公里 · 在线</p>
              <p class="text-sm text-secondary mt-1 line-clamp-1">擅长人像摄影，希望交换学习吉他技能</p>
              <button class="btn btn-sm btn-outline-primary rounded-pill mt-1">关注</button>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-3 p-3 list-item">
          <div class="d-flex">
            <div class="no-image" style="width: 70px; height: 70; font-size: 24px;" class="me-3 flex-shrink-0 rounded-2">
              <i class="fa fa-user"></i>
            </div>
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">王芳</h6>
                <span class="member-tag bg-success text-white">音乐</span>
              </div>
              <p class="text-xs text-secondary">5公里 · 1小时前</p>
              <p class="text-sm text-secondary mt-1 line-clamp-1">钢琴教师，想学习英语口语交流</p>
              <button class="btn btn-sm btn-outline-primary rounded-pill mt-1">关注</button>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-3 p-3 list-item">
          <div class="d-flex">
            <div style="width: 70px; height: 70;" class="me-3 flex-shrink-0 multi-images rounded-2 overflow-hidden">
              <img src="https://picsum.photos/300/300?random=3" class="w-100 h-100 object-cover" alt="会员照片1">
              <img src="https://picsum.photos/300/300?random=4" class="object-cover" alt="会员照片2">
            </div>
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">张伟</h6>
                <span class="member-tag bg-info text-white">编程</span>
              </div>
              <p class="text-xs text-secondary">1公里 · 30分钟前</p>
              <p class="text-sm text-secondary mt-1 line-clamp-1">前端开发，可教JavaScript，想学架子鼓</p>
              <button class="btn btn-sm btn-outline-primary rounded-pill mt-1">关注</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 3. 图文卡片列表 -->
    <div class="list-section">
      <h6 class="fw-bold mb-3">图文卡片列表</h6>
      <div class="space-y-3">
        <div class="bg-white rounded-3 overflow-hidden media-card">
          <div class="row g-0">
            <div class="col-4">
              <img src="https://picsum.photos/300/300?random=1" class="w-100 h-100 object-cover" alt="会员照片">
            </div>
            <div class="col-8 p-3">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">李明</h6>
                <span class="member-tag bg-primary text-white">摄影</span>
              </div>
              <p class="text-xs text-secondary">2公里 · 在线</p>
              <p class="text-sm text-secondary mt-1 line-clamp-2">擅长人像摄影，希望交换学习吉他技能，周末可线下交流</p>
              <div class="d-flex gap-2 mt-2">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-2">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-2">私信</button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-3 overflow-hidden media-card">
          <div class="row g-0">
            <div class="col-4 no-image" style="font-size: 24px;">
              <i class="fa fa-user"></i>
            </div>
            <div class="col-8 p-3">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">王芳</h6>
                <span class="member-tag bg-success text-white">音乐</span>
              </div>
              <p class="text-xs text-secondary">5公里 · 1小时前</p>
              <p class="text-sm text-secondary mt-1 line-clamp-2">钢琴教师，10年教学经验，想学习英语口语交流</p>
              <div class="d-flex gap-2 mt-2">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-2">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-2">私信</button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-3 overflow-hidden media-card">
          <div class="row g-0">
            <div class="col-4 multi-images">
              <img src="https://picsum.photos/300/300?random=3" class="w-100 h-100 object-cover" alt="会员照片1">
              <img src="https://picsum.photos/300/300?random=4" class="object-cover" alt="会员照片2">
            </div>
            <div class="col-8 p-3">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold">张伟</h6>
                <span class="member-tag bg-info text-white">编程</span>
              </div>
              <p class="text-xs text-secondary">1公里 · 30分钟前</p>
              <p class="text-sm text-secondary mt-1 line-clamp-2">前端开发，可教JavaScript，React，想学架子鼓</p>
              <div class="d-flex gap-2 mt-2">
                <button class="btn btn-sm btn-outline-primary rounded-pill px-2">关注</button>
                <button class="btn btn-sm btn-primary rounded-pill px-2">私信</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 4. 紧凑列表 -->
    <div class="list-section">
      <h6 class="fw-bold mb-3">紧凑列表</h6>
      <div class="bg-white rounded-3 p-2">
        <div class="compact-item d-flex items-center">
          <img src="https://picsum.photos/300/300?random=1" class="rounded-circle me-3" width="40" height="40" alt="会员照片">
          <div class="flex-grow-1">
            <div class="d-flex justify-content-between">
              <h6 class="fw-bold text-sm">李明</h6>
              <span class="text-xs text-secondary">在线</span>
            </div>
            <p class="text-xs text-secondary">摄影 · 2公里</p>
          </div>
          <button class="btn btn-xs btn-primary rounded-pill px-3">关注</button>
        </div>
        
        <div class="compact-item d-flex items-center">
          <div class="no-image rounded-circle me-3" width="40" height="40" style="width:40px; height:40px; font-size:16px;">
            <i class="fa fa-user"></i>
          </div>
          <div class="flex-grow-1">
            <div class="d-flex justify-content-between">
              <h6 class="fw-bold text-sm">王芳</h6>
              <span class="text-xs text-secondary">1小时前</span>
            </div>
            <p class="text-xs text-secondary">音乐 · 5公里</p>
          </div>
          <button class="btn btn-xs btn-primary rounded-pill px-3">关注</button>
        </div>
        
        <div class="compact-item d-flex items-center">
          <div class="multi-images rounded-circle me-3 overflow-hidden" style="width:40px; height:40px;">
            <img src="https://picsum.photos/300/300?random=3" class="w-100 h-100 object-cover" alt="会员照片1">
            <img src="https://picsum.photos/300/300?random=4" class="object-cover" alt="会员照片2">
          </div>
          <div class="flex-grow-1">
            <div class="d-flex justify-content-between">
              <h6 class="fw-bold text-sm">张伟</h6>
              <span class="text-xs text-secondary">30分钟前</span>
            </div>
            <p class="text-xs text-secondary">编程 · 1公里</p>
          </div>
          <button class="btn btn-xs btn-primary rounded-pill px-3">关注</button>
        </div>
        
        <div class="compact-item d-flex items-center">
          <img src="https://picsum.photos/300/300?random=5" class="rounded-circle me-3" width="40" height="40" alt="会员照片">
          <div class="flex-grow-1">
            <div class="d-flex justify-content-between">
              <h6 class="fw-bold text-sm">赵丽</h6>
              <span class="text-xs text-secondary">离线</span>
            </div>
            <p class="text-xs text-secondary">美食 · 8公里</p>
          </div>
          <button class="btn btn-xs btn-primary rounded-pill px-3">关注</button>
        </div>
      </div>
    </div>
    
    <!-- 5. 标签式列表 -->
    <div class="list-section">
      <h6 class="fw-bold mb-3">标签式列表</h6>
      <div class="d-flex flex-wrap gap-2">
        <div class="bg-white rounded-3 p-3 tag-item d-flex align-items-center" style="width: calc(50% - 8px);">
          <img src="https://picsum.photos/300/300?random=1" class="rounded-circle me-3" width="50" height="50" alt="会员照片">
          <div>
            <h6 class="fw-bold text-sm">李明</h6>
            <span class="member-tag bg-primary text-white">摄影</span>
          </div>
        </div>
        
        <div class="bg-white rounded-3 p-3 tag-item d-flex align-items-center" style="width: calc(50% - 8px);">
          <div class="no-image rounded-circle me-3" width="50" height="50" style="width:50px; height:50px; font-size:20px;">
            <i class="fa fa-user"></i>
          </div>
          <div>
            <h6 class="fw-bold text-sm">王芳</h6>
            <span class="member-tag bg-success text-white">音乐</span>
          </div>
        </div>
        
        <div class="bg-white rounded-3 p-3 tag-item d-flex align-items-center" style="width: calc(50% - 8px);">
          <div class="multi-images rounded-circle me-3 overflow-hidden" style="width:50px; height:50px;">
            <img src="https://picsum.photos/300/300?random=3" class="w-100 h-100 object-cover" alt="会员照片1">
            <img src="https://picsum.photos/300/300?random=4" class="object-cover" alt="会员照片2">
          </div>
          <div>
            <h6 class="fw-bold text-sm">张伟</h6>
            <span class="member-tag bg-info text-white">编程</span>
          </div>
        </div>
        
        <div class="bg-white rounded-3 p-3 tag-item d-flex align-items-center" style="width: calc(50% - 8px);">
          <img src="https://picsum.photos/300/300?random=5" class="rounded-circle me-3" width="50" height="50" alt="会员照片">
          <div>
            <h6 class="fw-bold text-sm">赵丽</h6>
            <span class="member-tag bg-warning text-white">美食</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <div class="container-fluid">
      <div class="row text-center py-3">
        <div class="col-3">
          <a href="#" class="text-primary d-block">
            <i class="fa fa-home fs-5 mb-1"></i>
            <span class="d-block text-xs">首页</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-users fs-5 mb-1"></i>
            <span class="d-block text-xs">会员</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-bell fs-5 mb-1"></i>
            <span class="d-block text-xs">通知</span>
          </a>
        </div>
        <div class="col-3">
          <a href="#" class="text-secondary d-block">
            <i class="fa fa-user fs-5 mb-1"></i>
            <span class="d-block text-xs">我的</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 关注按钮状态切换
    document.querySelectorAll('.btn-outline-primary, .btn-primary').forEach(btn => {
      if (btn.textContent.trim() === '关注') {
        btn.addEventListener('click', function() {
          this.textContent = '已关注';
          if (this.classList.contains('btn-outline-primary')) {
            this.classList.remove('btn-outline-primary');
            this.classList.add('btn-primary');
          }
        });
      }
    });
  </script>
</body>
</html>
